<template>
  <div class="flex alcenter jscenter vh100 login-main">
    <div class="bgpart radius4 plr60 ptb40 mb50 w25 mwidth">
      <div class="tc ft20 color-b0b8db" slot="title">{{$t('forgot password')}}</div>
      <div class="mt40">
        <div class="bdbea2 flex alcenter bold">
          <div class="pb10 mr20 pointer ft14 active2px">{{$t('E-mail retrieved')}}</div>
        </div>
      </div>
      <a-form-model :model="form" ref="ruleForm" :rules="rules" class="mt20">
        <a-form-model-item prop="email">
          <a-input
            v-model="form.email"
            :placeholder="$t('Please enter your email')"
            class="flex1 h100 nwhite ft14"
          />
        </a-form-model-item>
        <a-form-model-item prop="code">
          <a-input
            v-model="form.code"
            :placeholder="$t('Please enter the verification code')"
            class="flex1 h100 nwhite ft14"
          >
            <a-button
              :disabled="state.smsSendBtn"
              @click.stop.prevent="getCaptcha"
              slot="suffix"
              type="link"
            >
              {{ (!state.smsSendBtn && "Send") || state.time + " s" }}
            </a-button>
          </a-input>
        </a-form-model-item>
        <a-form-model-item prop="_password">
          <a-input-password
            v-model="form._password"
            :placeholder="$t('Please enter the password')"
            class="flex1 h100 nwhite ft14"
          />
        </a-form-model-item>
        <a-form-model-item prop="password">
          <a-input-password
            v-model="form.password"
            :placeholder="$t('Please enter the password again')"
            class="flex1 h100 nwhite ft14"
          />
        </a-form-model-item>
        <div class="mt10 flex alcenter">
          <a-checkbox v-model="curPrivacy" />
          <p
            class="pl5 ft16 gray9 flex alcenter"
            @click="$router.push({ path: '/privacy' })"
          >
            <span class="blue pl5 pointer">
              {{ $t('User Agreement and Privacy Policy') }}
            </span>
          </p>
        </div>
        <a-form-model-item>
          <a-button
            size="large"
            type="primary"
            class="login-button text-color mt40"
            :loading="state.loading"
            block
            @click="onSubmit"
          >
            {{$t('Confirm')}}
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>
<script>
import { getCode, Register } from "@/api/sys";
export default {
  data() {
    return {
      form: {
        email: "",
        password: "",
        code: "",
        _password: "",
      },
      rules: {
        email: [
          { required: true, message: this.$t('Plaease input your email') },
          {
            pattern: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/,
            message: this.$t('Please enter a valid email address'),
          },
        ],
        _password: [{ required: true, message: this.$t("Please enter the password") }],
        code: [
          { required: true, message: this.$t("Please enter the verification code") },
        ],
        password: [
          { required: true, message: this.$t("Please enter the password again") },
          {
            validator: (rule, value, callback) => {
              if (value !== this.form._password) {
                callback(new Error(this.$t("The two passwords do not match!")));
              } else {
                callback();
              }
            },
          },
        ],
      },
      state: {
        smsSendBtn: false,
        time: 120,
        loading: false,
      },
      curPrivacy: true,
    };
  },
  mounted() {
    this.curPrivacy = true;
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.state.loading = true;
          Register(this.form)
            .then(() => {
              this.state.loading = false;
              this.$notification.success({
                message: this.$t('提示'),
                description: this.$t("Successfully saved"),
              });
              this.$router.replace({ path: "/" });
            })
            .catch(() => {
              this.state.loading = false;
            });
        }
      });
    },
    forgetPasswordHandler() {
      this.$router.push({ path: "/forgetPassword" });
    },
    getCaptcha(e) {
      e.preventDefault();
      const { state, form } = this;

      this.$refs.ruleForm.validateField("email", (err) => {
        if (!err) {
          state.smsSendBtn = true;

          const interval = window.setInterval(() => {
            if (state.time-- <= 0) {
              state.time = 120;
              state.smsSendBtn = false;
              window.clearInterval(interval);
            }
          }, 1000);

          // const hide = this.$message.loading('验证码发送中..', 0)
          getCode({ email: form.email, type: 2 })
            .then((res) => {
              console.log(res, "success");
              this.$notification["success"]({
                message: this.$t("提示"),
                description: this.$t("验证码发送成功"),
              });
              // setTimeout(hide, 2500)
              // this.$notification['success']({
              //   message: '提示',
              //   description: '验证码获取成功，您的验证码为：' + res.result.captcha,
              //   duration: 8
              // })
            })
            .catch((err) => {
              console.log(err, "error");
              // setTimeout(hide, 1)
              // clearInterval(interval)
              // state.time = 60
              // state.smsSendBtn = false
              // this.requestFailed(err)
            });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.mwidth {
  min-width: 440px;
}
.color-b0b8db {
  color: #b0b8db;
}
// .login-main{
:deep.ant-input,
:deep.ant-input-password .ant-input,
:deep.ant-input-affix-wrapper .ant-input {
  height: 50px;
  background-color: transparent;
}
:deep.ant-btn-link[disabled],
:deep.ant-btn-link:hover {
  color: #fcd535 !important;
}
</style>
